<pre style="font-size: 27px;"><code class="lang-less">
    ### myAngular
    angular+gulp项目
    
    > 配置安装(需要先安装nodejs)
    
    下载源文件后运行
    
    **NPM**
    ```sh
    npm install or cnpm install
    gulp
    ```
    
    > 前端自动化
    
    ## 对静态资源进行监听，编译，使用模块如下：
    
    * browser-sync
    * run-sequence
    * gulp-htmlmin
    * gulp-less
    * gulp-autoprefixer
    * gulp-sourcemaps
    * gulp-cssnano
    * gulp-uglify
    * gulp-imagemin
    * gulp-util
    
    ### 使用browser-sync 来进行本地静态资源服务器及刷新浏览器
    
    ```javascript
    
    gulp.task('browserSync', () => {
        browserSync({
            server: {
                baseDir: './',
                index: 'index.html'
            }
        })
    });
    
    ```
    
    ### 使用run-sequence 来同步运行任务插件
    
    ```javascript
    gulp.task('default', (callback) => {
        runSequence(['browserSync', 'watch'], callback);
    })
    ```
    
    ### 使用run-sequence 来同步运行任务插件
    
    ```javascript
    gulp.task('default', (callback) => {
        runSequence(['browserSync', 'watch'], callback);
    })
    ```
    
    ### 引入less，使用gulp-less，gulp-autoprefixer，gulp-sourcemap，gulp-cssnano 来编译压缩
    
    ```javascript
    
    gulp.task('less', () =>
        gulp
        .src('static/less/bootstrap.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(sourcemaps.write({ includeContent: false }))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('static/css'))
        .pipe(browserSync.reload({ stream: true }))
    );
    
    ```
    
    ### 引入gulp-uglify压缩js
    
    ```javascript
    
    gulp.task('script', () => {
        gulp.src(['controller/*.js', 'controller/**/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
    });
    
    ```
    
    ### 引入gulp-imagemin压缩图片
    
    ```javascript
    
    gulp.task('image', () => {
        gulp.src('static/images/**/*')
            .pipe(imagemin({ progressive: true }))
            .on('error', gutil.log)
            .pipe(gulp.dest('dist/images'));
    });
    
    ```
    
    ### 引入gulp-util输出压缩日志
    
    > 项目入口
    
    ## 使用的库主要是
    
    * requirejs
    * angular
    * angular-ui-router
    
    ### 使用requirejs 来加载页面所需的js
    
    ```javascript
    var CURRENT_PATH = '/'
    var COMPONENTS_PATH = './components/';
    
    require.config({
        paths: {
            'angular': COMPONENTS_PATH + 'angular/angular',
            'app': CURRENT_PATH + 'app',
            'ui-route': COMPONENTS_PATH + 'angular-ui-router/release/angular-ui-router',
            'route': CURRENT_PATH + 'route/angular.route',
        },
        shim: {
            'angular': {
                exports: 'angular'
            },
            'ui-route': {
                deps: ['angular'],
                exports: 'ui-route'
            }
        }
    })
    
    ```
    
    ### 引入
    
    ```javascript
    require([
        'angular',
        'app',
        'route',
        'ui-route',
        './controller/controller',
    ], function() {
        angular.bootstrap(document, ['webapp']);
    })
    
    ```
    ### angular 入口 app.js
    
    ```javascript
    
        var app = angular.module('webapp', [
            'ui.router',
            'webapp.Ctrl',
        ]);
        return app;
    
    ```
    ### angular 路由定义 angular.route.js
    
    ```javascript
    
    var PATH_LAYOUT = './views/common/layout.html';
    
    var PATH_MENU = './views/common/menu.html';
    
    $stateProvider.state('index', {
        url: '/index',
        views: {
            'layout': {
                templateUrl: PATH_LAYOUT
            },
            'side@index': {
                templateUrl: PATH_MENU
            },
            'main@index': {
                templateUrl: './views/homepage/index.html'
            }
        }
    })
    
    ```

</code></pre>
